{{define "admin/system/role_lists-header"}}
<style>
    .tabs-container .panel-body {
        border-bottom: none;
    }

    .tabs-container .nav-tabs > li.active > a, .tabs-container .nav-tabs > li.active > a:focus, .tabs-container .nav-tabs > li.active > a:hover {
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }

    .nav-tabs > li > a {
        color: #555;
    }
</style>
{{end}}
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="row" id="searchForm">
                        <div class="col-sm-3">
                            <div class="input-group">
                                <input type="text" placeholder="请输入关键词" class="input-md form-control" name="keyWord"
                                       id="keyWord">
                                <span
                                        class="input-group-btn">
                                        <button type="button" class="btn btn-md btn-primary"
                                                onclick="refresh()"> 搜索</button>
                                <button type="button" class="btn btn-md btn-primary" style="margin-left: 10px"
                                        name="resetBtn"> 重置</button> </span>
                            </div>
                        </div>

                        <div class="col-sm-2 pull-right" style="text-align: right">
                            <button type="button" class="btn btn-md btn-primary" id="addBtn"> 添加</button>
                        </div>
                    </form>
                    <div class="table-responsive">

                        <table id="table" class="table table-striped" data-mobile-responsive="true"></table>

                    </div>

                </div>
            </div>
        </div>

    </div>
</div>


</body>


{{define "admin/system/role_lists-footer"}}

<script>


    var config = {};
    config.url = '/admin/system/role/list';
    config.columns = [ //字段

        {title: '序号', field: 'Id', align: 'center', valign: 'middle'},
        {title: '名称', field: 'Title', align: 'center', valign: 'middle'},
        {title: '创建时间', field: 'CreatedAt', align: 'center', valign: 'middle'},
        {
            title: '操作', field: 'Id', align: 'center', valign: 'middle',
            formatter: function (value) {
                return (
                        '<a href="javascript: void(0);" onclick="units.modify(this,' + value + ')">修改</a>&nbsp;' +
                        '<a href="javascript: void(0);" onclick="units.permission(this,' + value + ')">权限</a>'
                );
            }
        }
    ];
    tips.bootstrapTable(config);
    $(document).on('click', '[name="resetBtn"]', function () {
        document.getElementById("searchForm").reset();
        refresh();
    });

    function refresh() {
        $('#table').bootstrapTable('refresh');
    }


    var layerIndex;

    $(document).on('click', '#addBtn', function () {

        layerIndex = layer.open({
            type: 1,
            title: '添加商品分类',
            area: ['40%', '40%'],
            content: units.buildHtml()
        });
    });


    var units = {
        modify: function (_this, id) {
            var temp = $(_this).parent().prev();
            layerIndex = layer.open({
                type: 1,
                title: '修改商品分类',
                area: ['40%', '40%'],
                content: units.buildHtml(temp.prev().prev().text()),
                shadeClose: true,
                success: function () {
                    var srcAddr = temp.prev().find('img').attr('src');
                    if (srcAddr) {
                        var imgView = $("#imgView");
                        imgView.css('display', '');
                        imgView.find("img").attr('src', srcAddr);
                    }
                    $("#addYes").data('id', id);
                }
            });
        },
        roleHtml: "{{render "admin/system/role_permission"}}",
        permissionIndex: null,
        permission: function (_this, id) {
            this.permissionIndex = layer.open({
                title: "权限分配",
                type: 1,
                // offset: 'b',
                area: ['80%', '30%'],
                content: this.roleHtml,
                success: function () {
                    $("#assignPermissions").data('id', id);
                    $(".i-checks").iCheck({
                        checkboxClass: "icheckbox_square-green",
                        radioClass: "iradio_square-green"
                    }).on('ifClicked', function () {
                        var child = $(this).data('child');

                        if ($(this).prop('checked') === true) {
                            if (child) {
                                $("#" + child).find("input").iCheck('uncheck');
                            }
                        } else {
                            if (child) {
                                $("#" + child).find("input").iCheck('check');
                            }
                        }
                    });

                    var config = {url: '/admin/system/role/' + id + '/permissions'};
                    config.success = function (result) {
                        var permissionIds = [];
                        $.each(result.data, function (inx, val) {
                            permissionIds.push(val['PermissionId'])
                        });
                        var items = $("input[type=checkbox]");
                        items.each(function () {
                            var temp = parseInt($(this).val().toString());
                            if (permissionIds.indexOf(temp) !== -1) {
                                $(this).iCheck('check');
                            }
                        });
                    };
                    tips.ajax(config);
                }
            });
        }
    };

    $(document).on('click', '#assignPermissions', function () {

        var chkVal = [];
        var items = $("input[type=checkbox]:checked");
        items.each(function () {
            chkVal.push($(this).val());
        });

        var config = {
            url: '/admin/system/role/' + $(this).data('id') + '/permissions',
            data: {idList: chkVal},
            type: 'put',
            success: function (result) {

                layer.msg(result.message, {icon: 6, time: 1500}, function () {
                    layer.close(units.permissionIndex);
                });
            }
        };
        tips.ajax(config);

    });

</script>
{{end}}